<template>
  <a-spin :spinning="spinning" :tip="'加载中'" :delay="100">
    <div class="main_hot">
      <div class="main_hot_good_question">
        <div class="main_hot_good_question_title">好问题</div>
        <div v-for="item in rankBeforeTenProblemList" :key="item.id">
          <div class="main_hot_good_question_for">
            <!--          <img :src="item.avatar" class="main_hot_good_question_for_avatar" alt="头像">-->
            <a-popover placement="right">
              <template #content>
                <GoodQuestionPopover :userinfo="item.userinfo"/>
              </template>
              <img :src="item.avatar" class="main_hot_good_question_for_avatar" alt="头像">
            </a-popover>
            <div>
              <div @click="handleGoPage(item.id)" class="main_hot_good_question_for_title">{{ item.title }}</div>
              <div class="main_hot_good_question_for_nickname">作者：{{ item.nickname }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="main_hot_answer_count">
        <div class="main_hot_answer_count_title">回答数</div>
        <div v-for="item in rankBeforeTenUserList" :key="item.id">
          <div class="main_hot_answer_count_title_for">
            <!--          <img :src="item.avatar" class="main_hot_answer_count_title_for_avatar" alt="头像">-->
            <UserPopover :userinfo="item"/>
            <div>
              <div class="main_hot_answer_count_title_for_nickname">{{ item.nickname }}</div>
              <div class="main_hot_answer_count_title_for_replyCount">回答数：{{ item.replyCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getUserinfoById, rankBeforeTenToGoodProblem, rankBeforeTenToReplyCount} from "@/api/home/answer";
import router from "@/router";
import {Userinfo} from "@/model/personalCenter/userinfo";
import UserPopover from "@/dynamicComponents/userPopover/userPopover";
import GoodQuestionPopover from "@/views/home/answer/hot/goodQuestionPopover.vue"

//是否显示加载中
const spinning = ref<boolean>(true);

//问题数据相关的类型
interface Answer {
  id: number,
  title: string,
  userId: number,
  nickname: string,
  avatar: string,
  views: number,
  likeCount: number,
  reply: number,
  solve: string,
  createTime: Date,
  updateTime: Date,
  isLike: number,
  userinfo: {
    id: number,
    mobile: string,
    nickname: string,
    sex: string,
    birthday: Date,
    avatar: string,
    email: string,
    integral: number,
    introduction: string,
    friendApplyCount: number,
    attentionCount: number,
    replyCount: number
  }
}

//前十条问题列表
const rankBeforeTenProblemList = ref<Answer[]>([])

//根据点赞数查询前十条问题
const handleRankBeforeTenGoodProblem = () => {
  rankBeforeTenToGoodProblem().then((res) => {
    rankBeforeTenProblemList.value = res.data.data.list
    res.data.data.list.map((item: Answer) => {
      getUserinfoById(item.userId).then((res) => {
        item.userinfo = res.data.data.user
      })
    })
  })
}

//前十条个户列表
const rankBeforeTenUserList = ref<Userinfo[]>([])

//根据点赞数查询前十个用户
const handleRankBeforeTenToReplyCount = () => {
  rankBeforeTenToReplyCount().then((res) => {
    rankBeforeTenUserList.value = res.data.data.list
  })
}

//根据热评id动态跳转页面
const handleGoPage = (id: number) => {
  router.push("/problemDetails?id=" + id)
}

//同步代码块
const syncCode = () => {
  handleRankBeforeTenGoodProblem()
  handleRankBeforeTenToReplyCount()
}

syncCode()
onMounted(() => {
  setTimeout(() => {
    spinning.value = false
  }, 1000)
})
</script>

<style lang="less" scoped>
.main_hot {
  display: flex;
  margin-right: 5px;

  .main_hot_good_question {
    flex: 5;
    width: 50%;

    .main_hot_good_question_title {
      text-align: center;
      padding: 5px;
      font-size: 20px;
      font-weight: bold;
    }

    .main_hot_good_question_for {
      font-size: 15px;
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      margin-right: 10px;

      .main_hot_good_question_for_avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-top: 5px;
        margin-bottom: 5px;
      }

      .main_hot_good_question_for_title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
        width: 300px;
      }

      .main_hot_good_question_for_title:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }

      .main_hot_good_question_for_nickname {
        padding-left: 10px;
        padding-bottom: 5px;
      }
    }
  }

  .main_hot_answer_count {
    flex: 5;

    .main_hot_answer_count_title {
      text-align: center;
      padding: 5px;
      font-size: 20px;
      font-weight: bold;
    }

    .main_hot_answer_count_title_for {
      font-size: 15px;
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      margin-right: 10px;

      .main_hot_answer_count_title_for_avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-top: 10px;
      }

      .main_hot_answer_count_title_for_nickname {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
      }

      .main_hot_answer_count_title_for_replyCount {
        padding-left: 10px;
        padding-bottom: 5px;
      }
    }
  }
}
</style>